﻿@using System.Activities.Expressions
@using System.Web.Optimization
@using VocaDb.Web.Models
@using VocaDb.Web.Helpers
@using R = ViewRes.User;
@using Res = ViewRes.User.MySettingsStrings
@using DetailsRes = ViewRes.User.DetailsStrings
@inherits VocaDb.Web.Code.VocaDbPage<MySettingsModel>

@{
    PageProperties.Title = R.MySettingsStrings.MySettingsTitle;
	ViewBag.Parents = new[] { 
		Html.ActionLink(ViewRes.SharedStrings.Users, "Index"), 
		Html.ActionLink(Model.Username, "Profile", new { id = Model.Username }) 
	};		
}

@Helpers.ValidationSymmaryDiv(R.MySettingsStrings.UnableToSave)

@using (Html.BeginForm("MySettings", "User", FormMethod.Post)) {
    
	@Html.HiddenFor(m => m.Id)
    @Html.HiddenFor(m => m.HasPassword)
    @Html.HiddenFor(m => m.HasTwitterToken)
    @Html.HiddenFor(m => m.AccessKey)
    @Html.HiddenFor(m => m.TwitterName)
	@Html.HiddenFor(m => m.CanChangeName)

	@Helpers.SaveBtn()
	
	<div id="tabs">

		<ul>
			<li><a href="#accountSettings">@Res.AccountSettings</a></li>
			<li><a href="#password">@Res.ChangePassword</a></li>
			<li><a href="#interface">@Res.Interface</a></li>
			<li><a href="#profile">@Res.Profile</a></li>
			<li><a href="#connectivity">@Res.Connectivity</a></li>
		</ul>

		<div id="accountSettings">
			<div>
				<div class="editor-label">
					@Helpers.HelpLabel(Res.Username, "Username can be changed once per year. Username may contain alphanumeric characters and underscores. After changing your username you need to log in again. Contact staff member if necessary.")
				</div>
				<div class="editor-field">
					@if (Model.CanChangeName) {
						@Html.TextBoxFor(m => m.Username)
					} else {
						@Html.HiddenFor(m => m.Username)
						@Html.DisplayFor(m => m.Username)
					}
				</div>

				<div class="editor-label">
					@Helpers.HelpLabel(Res.Email, Res.EmailNote)
				</div>
				<div class="editor-field">
					@Html.TextBoxForKnockout(m => m.Email, "value: email", maxLength: 50)
					<a data-bind="click: verifyEmail, visible: canVerifyEmail" href="#" class="textLink acceptLink" style="display: none;">Verify email</a>
					<img data-bind="visible: emailVerified" src="@Url.Content("~/Content/Icons/tick.png")" style="display: none;" title="Verified email" />
					@Html.ValidationMessageFor(m => m.Email)
				</div>

				<div class="editor-label">
					@R.MySettingsStrings.EmailOptions
				</div>
				<div class="editor-field">
					@Html.EmailOptionsDropDownListFor(m => m.EmailOptions, new { @class = "input-xlarge" })
				</div>
				
				<div class="editor-label">
					@R.MySettingsStrings.Privacy
				</div>
				<div class="editor-field">
					<p>
						<label class="checkbox">
							@Html.CheckBoxFor(m => m.ShowActivity)
							@R.MySettingsStrings.AnonymousActivity
						</label>
					</p>
					<p>
						<label class="checkbox">
							@Html.CheckBoxFor(m => m.PublicRatings)
							@R.MySettingsStrings.PublicRatings
						</label>
					</p>
					<p>
						<label class="checkbox">
							@Html.CheckBoxFor(m => m.PublicAlbumCollection)
							@Res.PublicAlbumCollection
						</label>
					</p>
				</div>
                				   
			</div>
		</div>
		
		<div id="password">
			<div class="alert alert-info">
				@Res.ChangePasswordNotice
			</div>
			
			@if (Model.HasPassword) {
				<div class="editor-label">
					@Res.CurrentPass
				</div>
				<div class="editor-field">
					@Html.PasswordFor(m => m.OldPass)
					@Html.ValidationMessageFor(m => m.OldPass)
				</div>
			}

			<div class="editor-label">
				@Res.NewPass
			</div>
			<div class="editor-field">
				@Html.PasswordFor(m => m.NewPass)
				@Html.ValidationMessageFor(m => m.NewPass)
			</div>

			<div class="editor-label">
				@Res.NewPassAgain
			</div>
			<div class="editor-field">
				@Html.PasswordFor(m => m.NewPassAgain)
				@Html.ValidationMessageFor(m => m.NewPassAgain)
			</div>

		</div>
	
		<div id="interface">
		
			<div class="editor-label">
				@R.MySettingsStrings.InterfaceLanguageSelection
			</div>
			<div class="editor-field">
				@Html.DropDownListFor(m => m.InterfaceLanguageSelection,
					new SelectList(Model.AllInterfaceLanguages.ToDictionaryFull(Res.Automatic), "Key", "Value", Model.InterfaceLanguageSelection), 
					new { @class = "input-xlarge" })
			</div>

			<div class="editor-label">
				<label>
				@R.MySettingsStrings.CultureName
				</label>
			</div>
			<div class="editor-field">
				@Html.DropDownListFor(m => m.CultureSelection,
					new SelectList(Model.AllInterfaceLanguages.ToDictionaryFull(Res.Automatic), "Key", "Value", Model.CultureSelection),
					new { @class = "input-xlarge" })
			</div>
			
			<div class="editor-label">
				@R.MySettingsStrings.DefaultLanguageSelection
			</div>
			<div class="editor-field">
				@Html.LanguagePreferenceDropDownListFor(m => m.DefaultLanguageSelection)
			</div>

			<div class="editor-label">
				@R.MySettingsStrings.PreferredVideoService
			</div>
			<div class="editor-field">
				@Html.DropDownListFor(m => m.PreferredVideoService, new SelectList(Model.AllVideoServices, Model.PreferredVideoService))
			</div>
			
			<div class="editor-label">
				@R.MySettingsStrings.UnreadNotificationsToKeep
			</div>
			<div class="editor-field">
				<input type="number" min="1" max="390" maxlength="3" name="UnreadNotificationsToKeep" value="@Model.UnreadNotificationsToKeep" />
			</div>
			
			<div class="editor-label">
				@Res.Theme
			</div>
			<div class="editor-field">
				@Html.DropDownListFor(m => m.Stylesheet, new SelectList(Model.AllStylesheets, "Key", "Value", Model.Stylesheet))
			</div>

		</div>
        
        <div id="profile">
			
 			<div class="editor-label">
				@R.MySettingsStrings.AboutMe
				@Helpers.MarkdownNotice()
			</div>
			<div class="editor-field">
				@Html.TextAreaForKnockout(m => m.AboutMe, binding: "textInput: aboutMe", cssClass: "input-xxlarge", rows: 7)
				<br />

				@Res.LivePreview
				<div data-bind="markdown: aboutMe"></div>
				<br />
			</div>

 			<div class="editor-label">
				@DetailsRes.LanguagesIKnow
			</div>
			<div class="editor-field">
				<table>
					<tbody>
						<!-- ko foreach: knownLanguages -->
							<tr>
								<td>
									@KnockoutHelpers.DropdownList(Model.AllUserKnownLanguages.ToDictionaryFull(VocaDb.Web.Resources.Domain.Globalization.InterfaceLanguageStrings.Other), "cultureCode", cssClass: "input-xlarge")
								</td>
								<td>
									@KnockoutHelpers.DropdownList(Translate.UserLanguageProficiencyNames.ValuesAndNamesStrings, "proficiency")
								</td>
								<td>								
									<a href="#" class="textLink deleteLink" data-bind="click: function() { $parent.knownLanguages.remove($data); }">@ViewRes.SharedStrings.Delete</a>
								</td>
							</tr>
						<!-- /ko -->	
					</tbody>				
				</table>
				<a href="#" class="textLink addLink" data-bind="click: addKnownLanguage">@Res.AddKnownLanguage</a>
				<input type="hidden" name="knownLanguages" data-bind="value: ko.toJSON(knownLanguages)" />
			</div>
           
 			<div class="editor-label">
				@R.MySettingsStrings.Location
			</div>
			<div class="editor-field">
				@Html.TextBoxFor(m => m.Location, new { @class = "input-xlarge" })
			</div>
 
			<div class="editor-label">
				@R.MySettingsStrings.ExternalLinks
			</div>
			<div class="editor-field" data-bind="with: webLinksViewModel">
				@KnockoutHelpers.WebLinksEditViewKnockout(false)
				<input type="hidden" name="webLinks" data-bind="value: ko.toJSON(webLinks)" />
			</div>

		</div>

		<div id="connectivity">
	
			<div class="alert alert-info">
				@Res.AccessKeyDescription
			</div>

			<div class="editor-label">
				@R.MySettingsStrings.AccessKey				
			</div>
			<div class="editor-field">
				@Model.AccessKey
				@Html.ActionLink(R.MySettingsStrings.Reset, "ResetAccesskey", "User", null, new { onclick = "return confirm(\"" + R.MySettingsStrings.ReallyReset + "\");", @class = "textLink refreshLink" })				
            </div>

			<div class="editor-label">
				Twitter
			</div>
			<div class="editor-field">
				@if (Model.HasTwitterToken) {
                    @Model.TwitterName
					
					if (Model.HasPassword) {
						@:&nbsp;
						@Html.ActionLink("Disconnect", "DisconnectTwitter", null, new { @class = "textLink removeLink"})
					}
					
                } else {
				    @Html.ActionLink(R.MySettingsStrings.Connect, "ConnectTwitter", "User", null, new { @class = "textLink addLink" })
                }
            </div>

		</div>
	</div>
	
	<br />
	@Helpers.SaveBtn()
	
}

@section BodyScripts {
	@Scripts.Render("~/bundles/shared/edit", "~/bundles/User/MySettings")
	<script type="text/javascript">

		$(document).ready(function () {

			$("#tabs").tabs();

			var urlMapper = new vdb.UrlMapper('@Url.Content("~/")');
			var repository = new vdb.repositories.UserRepository(urlMapper);

			@* Can't encode about me text here because textarea needs unencoded. It's user's own content anyway. *@
			@{ var data = new { Model.AboutMe, Model.Email, Model.EmailVerified, Model.KnownLanguages, Model.WebLinks };	}
			var model = @Html.Raw(JsonHelpers.Serialize(data));

			var viewModel = new vdb.viewModels.MySettingsViewModel(repository, model.aboutMe, model.email, model.emailVerified, model.webLinks, model.knownLanguages);
			ko.applyBindings(viewModel);

		});

	</script>
}